<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>productDetails</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../shop/css/Navigation.css">
    <link rel="stylesheet" href="../shop/css/index.css">
    <script type="text/javascript" src="../shop/js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="../shop/css/swiper.min.css">
    <script src="../shop/js/swiper.min.js"></script>
</head>
<body>
<div class="topTitle ">首页</div>
<!-- 轮播图 -->
<div class="swiper-container banner_swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../shop/images/mountain.jpg"/></div>
        <div class="swiper-slide"><img src="../shop/images/mountain1.jpg"></div>
        <div class="swiper-slide"><img src="../shop/images/mountain2.jpg"></div>
        <div class="swiper-slide"><img src="../shop/images/mountain3.jpg"></div>
        <div class="swiper-slide"><img src="../shop/images/mountain4.jpg"></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
</div>
<!-- 跑马灯广告 -->
<div class="advertisement">
    <span>平台公告</span>
    <div class="line">|</div>
    <marquee behavior="scroll">我来回滚动我来回滚动</marquee>
</div>
<!-- 滑动轮播 -->
<div id="box">
    <div class="swiper-container banner_swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../shop/images/mountain.jpg"/></div>
            <div class="swiper-slide"><img src="../shop/images/mountain1.jpg"></div>
            <div class="swiper-slide"><img src="../shop/images/mountain2.jpg"></div>
            <div class="swiper-slide"><img src="../shop/images/mountain3.jpg"></div>
            <div class="swiper-slide"><img src="../shop/images/mountain4.jpg"></div>
            <div class="swiper-slide"><img src="../shop/images/mountain.jpg"/></div>
            <div class="swiper-slide"><img src="../shop/images/mountain1.jpg"></div>
            <div class="swiper-slide"><img src="../shop/images/mountain2.jpg"></div>
        </div>
        <!--如果你需要分页-->
        <div class="swiper-pagination" id="swiper-pagination"></div>
    </div>
</div>
<div class="mainBox">
    <p>艺术咖</p>
    <div class="art">
        <img src="../shop/images/mountain.jpg" class="artLeft"/>
        <div class="artRight">
            <img src="../shop/images/mountain1.jpg"/>
            <img src="../shop/images/mountain2.jpg"/>
        </div>
    </div>
    <p>最新资讯</p>
    <div class="information">
        <div class="newsDetail">
            <img src="../shop/images/mountain1.jpg"/>
            <div>
                <p>新闻标题</p>
                <p>2020-6-10</p>
            </div>
        </div>
        <div class="newsDetail">
            <img src="../shop/images/mountain1.jpg"/>
            <div>
                <p>新闻标题</p>
                <p>2020-6-10</p>
            </div>
        </div>
        <div class="newsDetail">
            <img src="../shop/images/mountain1.jpg"/>
            <div>
                <p>新闻标题</p>
                <p>2020-6-10</p>
            </div>
        </div>
    </div>
</div>
<div class="space"></div>
<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="nav-item home active">
                <span class="glyphicon glyphicon-home"><span>
                <div>首页</div>
        </div>
        <div class="nav-item shoppingMall">
                <span class="glyphicon glyphicon-shopping-cart"><span>
                <div>商城</div>
        </div>
        <div class="nav-item order">
                <span class="glyphicon glyphicon-list"><span>
                <div>订单</div>
        </div>
        <div class="nav-item mine">
                <span class="glyphicon glyphicon-user"><span>
                <div>我</div>
        </div>
    </div>
</nav>
</body>
<script>
    $(document).ready(function () {
        // 轮播图
        var mySwiper = new Swiper ('.banner_swiper1', {
            loop : true,
            autoplay:{disableOnInteraction : false},
            //小圆点
            pagination: {
                el: '.swiper-pagination',
            }
        });
        // 滑动轮播
        var swiper = new Swiper('.banner_swiper2', {
            loop : true,
            // 一行显示slider的个数
            slidesPerView: 4,
            // 定义slides的数量多少为一组
            slidesPerGroup: 4,

            // 分页
            pagination: {
                el: '#swiper-pagination',

                // 设为true, 点击分页器的指示点分页器会控制Swiper切换
                clickable: true,
            }
        });

        $('.container').on('click', '.nav-item', function() {
            const $this = $(this)
            const index = $this.index()

            $this.addClass('active').siblings().removeClass('active')

            switch(index) {
                case 0:
                    location.href='indexshop.ftl';
                    break
                case 1:
                    location.href='rushBuy.html';
                    break
                case 2:
                    location.href='order.html';
                    break
                case 3:
                    location.href='../personalCenter/personalCenter.html';
                    break

            }
        })
    });
</script>
</html>